<style>
    .dhh-product-total-tab {
        height: 789px;
        margin-top: 10px;
        float: left;
        width: 100%;
    }
</style>
<div id="dhh-product-total" class="show_page_content">
    <!-- 顶部按钮 -->
    <div class="top_btn">
        <div class="input-line auto_14">
            <label for="">产品id:</label>
            <input type="text" placeholder="请输入产品id" id="product_id">
        </div>
        <div class="input-line auto_14">
            <label for="">日期:</label>
            <input type="text" placeholder="请输入开始时间" class="stime">
        </div>
        <div class="input-line auto_14">
            <label for="" style="float:left;text-align: center">--</label>
            <input type="text" placeholder="请输入结束时间" class="etime">
        </div>
        <div class="layui-form input-line" style="width:15%;float: left;">
            <label class="layui-form-label" style="width:46%;line-height:15px;">显示每日明细</label>
            <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" lay-filter="isreal">
            </div>
        </div>
        <div class="layui-btn input-line" id="hometotal-search"><i class="fa fa-search"></i>搜索</div>
    </div>
    <div class="dhh-product-total-tab">
        <table id="dhh-product-total-table"></table>
    </div>
</div>
<script>
    layui.use(["laydate", "table", "form"], function() {
        var layform = layui.form;
        var laytab = layui.table;
        //laydate 时间控件
        var heigth = $("#page-container").height() - 90;
        layform.render();
        $(".dhh-product-total-tab").height(heigth);
        //搜索
        $("#hometotal-search").on("click", function() {
            laytab.reload('usertable', {
                where: {

                    stime: $("#dhh-product-total .stime").val(),
                    etime: $("#dhh-product-total .etime").val(),
                    title: $("#product_id").val(),
                }
            });
        });
        //
        layform.on("switch(isreal)", function(d) {
            showdate(d)
        });

        function laydateOPtion(ele, fn) {
            return {
                elem: ele, //需显示日期的元素选择器
                event: 'click', //触发事件
                type: "datetime",
                istime: false, //是否开启时间选择
                isclear: true, //是否显示清空
                istoday: true, //是否显示今天
                issure: true, //是否显示确认
                festival: true, //是否显示节日
                lang: "zh-CN",
                max: (function() {
                    var d = new Date();
                    var y = d.getFullYear();
                    var m = d.getMonth() + 1;
                    var dy = d.getDate();
                    return y + "-" + zero(m) + "-" + zero(dy);
                }()),
                fixed: false, //是否固定在可视区域
                zIndex: 99999999, //css z-index
                btns: ['confirm'],
                done: fn,
            }
        }
        layui.laydate.render(laydateOPtion("#dhh-product-total .stime",
            function(value, date, endDate) {
                var eDateStr = $("#dhh-product-total .etime").val();
                var sDateStr = value;
                if (sDateStr && eDateStr) {
                    var startDateTime = new Date(sDateStr).getTime();
                    var endDateTime = new Date(eDateStr).getTime();
                    if (endDateTime <= startDateTime) {
                        layer.msg("开始时间不能小于等于结束时间!", {
                            time: 3000,
                            icon: 0
                        });
                        var ele = this.elem[0];
                        setTimeout(function() {
                            ele.value = "";
                        }, 400);

                    } else {

                    }
                }

            }));
        layui.laydate.render(laydateOPtion("#dhh-product-total .etime",
            function(value, date, endDate) {
                var eDateStr = value;
                var sDateStr = $("#dhh-product-total .etime").val();
                if (sDateStr && eDateStr) {
                    var startDateTime = new Date(sDateStr).getTime();
                    var endDateTime = new Date(eDateStr).getTime();
                    if (endDateTime <= startDateTime) {
                        layer.msg("结束时间不能小于等于开始时间!", {
                            time: 3000,
                            icon: 0
                        });
                        var ele = this.elem[0];
                        setTimeout(function() {
                            ele.value = "";
                        }, 400);

                    } else {

                    }
                }

            }));

        renderTable();

        function zero(m) {
            return m < 10 ? "0" + m : m;
        }

        function renderTable() {
            laytab.render({
                elem: '#dhh-product-total-table',
                height: heigth,
                url: "/statistics/product_dig",
                method: "get",
                id: "usertable",
                response: {
                    statusName: "result",
                    msgName: 'tips' //规定状态信息的字段名称，默认：msg
                        ,
                    countName: 'total' //规定数据总数的字段名称，默认：count
                        ,
                    dataName: 'rows',
                    statusCode: 1 //规定成功的状态码，默认：0
                },
                request: {
                    pageName: 'page' //页码的参数名称，默认：page
                        ,
                    limitName: 'lines' //每页数据量的参数名，默认：limit
                },
                where: {

                    stime: $("#dhh-product-total .stime").val(),
                    etime: $("#dhh-product-total .etime").val(),
                    title: $("#product_id").val(),
                },
                none: function(d) {
                    $(".layui-none").text(d.tips);
                },
                parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "result": res.result, //解析接口状态
                        "tips": res.tips, //解析提示文本
                        "total": res.total, //解析数据长度
                        "rows": res.rows //解析数据列表
                    }
                },
                cols: [
                    [{
                        title: "id编号",
                        field: "id",
                    }, {
                        title: "产品名称",
                        field: "title",
                    }, {
                        title: "日期",
                        field: "date",
                        hide: true
                    }, {
                        title: "uv",
                        field: "uv",
                    }]
                ],
                page: true,
                limits: [20, 50, 100],
                limit: 20,
                loading: true,
                text: {
                    error: "网络异常！"
                }
            });
        }
    })